<template>
    <Upload action="/mdo/api/v1/tls/upload" name="file" :with-credentials="true" :on-success="uploadSuccess" :before-upload="beforeUpload" ref="upload-file" class="server-file-upload" :on-remove="removeFile">
        <Button icon="ios-cloud-upload-outline">上传文件</Button>
    </Upload>
</template>

<script>
    export default {
        props:{
            value: {
                type: String,
                default: ''
            }
        },
        methods:{
            uploadSuccess(response, file, fileList) {
                this.$emit('input', response);
                this.$emit('on-change', response);
            },
            beforeUpload(file){
                this.$refs['upload-file'].clearFiles();
                this.$emit('input', '');
                this.$emit('on-change', '');
            },
            removeFile(file, fileList) {
                this.$refs['upload-file'].clearFiles();
                this.$emit('input', '');
                this.$emit('on-change', '');
            }
        }
    }
</script>

<style lang="less">
    .server-file-upload{
        display: flex;
        align-items: center;

        .ivu-upload-list{
            margin-top: 0;
            margin-left: 8px;
            height: 32px;
            li {
                padding: 0;
                &>i{
                    float: none;
                }
            }
        }
    }
</style>